import { useState } from 'react'
import { NavBar, Tabs } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

function Index() {
  const nav = useNavigate()
  const [activeTab, setActiveTab] = useState('全部')

  const handleBack = () => {
    nav(-1)
  }

  const tabs = [
    { key: '全部', title: '全部' },
    { key: '咨询中', title: '咨询中' },
    { key: '已完成', title: '已完成' },
    { key: '已关闭', title: '已关闭' },
    
  ]

  return (
    <div style={{background:'#fff',minHeight:'100vh'}}>
      {/* 顶部导航 */}
      <NavBar onBack={handleBack}>我的问诊记录</NavBar>
      
      {/* 标签导航 */}
      <div style={{
        background:'#fff',
        borderBottom:'1px solid #f0f0f0'
      }}>
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          style={{
            '--active-line-color': '#1677ff',
            '--active-title-color': '#333',
            '--title-font-size': '16px'
          }}
        >
          {tabs.map(tab => (
            <Tabs.Tab title={tab.title} key={tab.key} />
          ))}
        </Tabs>
      </div>

      {/* 空状态内容 */}
      <div style={{
        display:'flex',
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center',
        height:'calc(100vh - 120px)',
        background:'#f5f5f5'
      }}>
        {/* 插图区域 */}
        <div style={{
          position:'relative',
          marginBottom:'20px'
        }}>
          {/* 左侧装饰 */}
          <div style={{
            position:'absolute',
            left:'-30px',
            top:'20px',
            fontSize:'24px',
            color:'#d9d9d9'
          }}>
            🌿
          </div>
          
          {/* 中央剪贴板 */}
          <div style={{
            width:'80px',
            height:'100px',
            background:'#fff',
            borderRadius:'8px',
            border:'2px solid #d9d9d9',
            display:'flex',
            flexDirection:'column',
            alignItems:'center',
            justifyContent:'center',
            position:'relative',
            boxShadow:'0 2px 8px rgba(0,0,0,0.1)'
          }}>
            {/* 剪贴板夹子 */}
            <div style={{
              position:'absolute',
              top:'-8px',
              left:'50%',
              transform:'translateX(-50%)',
              width:'20px',
              height:'16px',
              background:'#d9d9d9',
              borderRadius:'4px 4px 0 0'
            }} />
            
            {/* 文档线条 */}
            <div style={{
              width:'50px',
              height:'2px',
              background:'#d9d9d9',
              marginBottom:'6px'
            }} />
            <div style={{
              width:'45px',
              height:'2px',
              background:'#d9d9d9',
              marginBottom:'6px'
            }} />
            <div style={{
              width:'40px',
              height:'2px',
              background:'#d9d9d9',
              marginBottom:'6px'
            }} />
            <div style={{
              width:'35px',
              height:'2px',
              background:'#d9d9d9'
            }} />
          </div>
          
          {/* 右侧装饰 */}
          <div style={{
            position:'absolute',
            right:'-30px',
            top:'20px',
            fontSize:'24px',
            color:'#d9d9d9'
          }}>
            🌿
          </div>
        </div>

        {/* 提示文字 */}
        <div style={{
          fontSize:'16px',
          color:'#999',
          textAlign:'center'
        }}>
          暂无订单
        </div>
      </div>
    </div>
  )
}

export default Index
















